import React, { useEffect, useState } from "react";
import axios from "axios";
import { Table, Button } from "antd";
import QRCode from "qrcode";
import "./style.scss";
import { useNavigate } from "react-router-dom";
const Index = () => {
  const [list, setList] = useState([]);
  const [url, setUrl] = useState("");
  const [show, setShow] = useState(false);
  const navigate = useNavigate()
  const columns = [
    {
      key: "id",
      dataIndex: "id",
      title: "id",
    },
    {
      key: "name",
      dataIndex: "name",
      title: "name",
    },
    {
      key: "address",
      dataIndex: "address",
      title: "address",
    },
    {
      key: "tel",
      dataIndex: "tel",
      title: "tel",
    },
    {
      key: "check",
      title: "操作",
      render(_: any) {
        return (
          <div>
            <Button
              onClick={() => {
                setShow(true);
                QRCode.toDataURL(JSON.stringify(_)).then((url) => {
                  setUrl(url);
                });
              }}
            >
              查看
            </Button>
            <Button onClick={ () => navigate('/person/' + _.id) }>详情</Button>
          </div>
        );
      },
    },
  ];
  const fetchList = async () => {
    const resp = await axios.get("/api/person/list");
    setList(resp.data.data);
  };
  useEffect(() => {
    fetchList();
  }, []);

  return (
    <div>
      <Table columns={columns} dataSource={list} rowKey={"id"}></Table>
      <div className="dialog" style={{ display: show ? "block" : "none" }}>
        <b onClick={() => setShow(false)}>X</b>
        <img src={url} alt="" />
      </div>
    </div>
  );
};

export default Index;
